<!DOCTYPE html>
<html>
<head>
    <title>人组管理</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="../../resources/lib/bui/css/bui-min.css" rel="stylesheet">
    <link href="../../resources/lib/bui/css/dpl-min.css" rel="stylesheet">
</head>
<body>
<div style="padding: 10px">
<div>
    <button type="button" class="button button-primary" onclick="addTemplet()">添加人组</button>
    <button type="button" class="button button-primary" onclick="removeTemplet()">删除</button>
</div>
<div class="row">
    <div class="span4" style="padding-top: 10px;">
        <div class="panel panel-head-borded panel-small">
            <div class="panel-header">人组列表</div>
            <div id="list1">
            </div>
        </div>
    </div>
    <div class="span16">
        <div class="panel panel-head-borded panel-small">
            <form id="templetForm" class="form-horizontal">
                <div class="row">
                    <div class="control-group span10">
                        <label class="control-label"><s>*</s>名称：</label>
                        <div class="controls">
                            <input name="Name" type="text" value="" class="control-text"  >
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="control-group12 span10">
                        <label class="control-label"><s>*</s>允许通行区域：</label>
                        <div class="controls bui-form-field-select" data-items="{'1':'区域1','2':'区域2','3':'区域3'}" data-select="{multipleSelect:true}">
                            <input name="areas" type="hidden" value="1,2">
                        </div>
                    </div>
                </div>
                <div class="row" style="height: 249px;width: 500px">
                    <div class="control-group span12">
                        <label class="control-label"><s>*</s>通行路线：</label>
                        <div class="controls">
                            <div id="list2">
                                </div>
                            <button type="button" class="button button-primary" onclick="deleteitem()">删除</button>
                            <button type="button" id="btnShow"  class="button button-primary">添加</button>
                        </div>

                        <button type="button" class="button button-primary" onclick="moveup()">上移</button><br>
                        <button type="button" class="button button-primary" onclick="movedown()">下移</button>
                    </div>
                </div>
                <div class="row">
                    <div class="form-actions offset3">
                        <button type="submit" class="button button-primary">保存</button>
                        <button type="reset" class="button">重置</button>
                    </div>
                </div>

            </form>
            <!--t为时间戳-->
            <script src="../../resources/lib/bui/js/jquery-1.8.1.min.js"></script>
            <script src="../../resources/lib/bui/js/bui-min.js"></script>
            <!-- script start-->
            <script type="text/javascript">

                function planFormat(value){
                    return value + '转换';
                }
                BUI.use(['bui/grid','bui/data','bui/form','bui/list','bui/overlay'],function (Grid,Data,Form,List,Overlay) {

                    var items = [
                                { text: '人组1',value:'1'},
                                { text: '人组2',value:'2'},
                                { text: '人组3',value:'3'}
                            ],
                            list = new List.SimpleList({
                                elCls:'bui-select-list',//默认是'bui-simple-list'
                                width:148,
                                height:700,
                                render : '#list1',
                                items : items
                            });
                    list.render();
                    list.on('itemclick', function(){
                        $("#templetForm input[name=Name]").val(list.getSelectedText());
                    });

                    var item1 =[
                        {text:'门1',value:'1'},
                        {text:'门2',value:'2'},
                        {text:'门3',value:'3'}
                    ]
                    list1 = new List.SimpleList({
                        elCls:'bui-select-list',//默认是'bui-simple-list'
                        width:148,
                        height:150,
                        render : '#list2',
                        items : item1
                    });
                    list1.render();

                    var item2 =[
                        {text:'门1',value:'1'},
                        {text:'门2',value:'2'},
                        {text:'门3',value:'3'},
                        {text:'门4',value:'4'},
                        {text:'门5',value:'5'},
                        {text:'门6',value:'6'}
                    ]
                    list2 = new List.SimpleList({
                        elCls:'bui-select-list',//默认是'bui-simple-list'
                        width:148,
                        height:150,
                        render : '#list3',
                        items : item2
                    });
                    list1.render();

                    var dialog = new Overlay.Dialog({
                        title:'子控件',
                        width:500,
                        height:250,
                        children : [list2],
                        childContainer : '.bui-stdmod-body',
                        success:function () {
                            alert('确认');
                            this.close();
                        }
                    });
                    $('#btnShow').on('click',function () {
                        dialog.show();
                    });





                    var form = new Form.HForm({
                        srcNode : '#templetForm'
                    });
                    form.render();

                    form.on('beforesubmit',function(){
                        if(!editing.isValid()){
                            return false;
                        }
                    });

                });
                function addTemplet() {
                    /*$("#dcForm").hide();
                     $("#doorForm").hide();*/
                    $("#templetForm input[type=reset]").click();
                    $("#templetForm input[name='Name']").val("新建人组");
                    //var node = tree.getSelected();
                    $("#templetForm input[name=id]").val(null);// 删除id属性
                }
                //删除人组
                function removeTemplet(){

                }
                //上移
                function moveup(){

                }
                //下移
                function movedown(){

                }
                //添加门路线
                function additem(){

                }
                //删除门路线
                function deleteitem(){

                }


            </script>
<!-- script end -->
</div>
</body>
</html>